<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="https://cdn.bootcss.com/hover.css/2.1.1/css/hover-min.css" rel="stylesheet">


    <style>
        /* 两列左侧自适应布局 */

        body {
            margin: 0 auto;
            height: 100%;
            background-color: #f8f8f8;
        }

        .destwrap {
            margin: 15px;
            background-color: #ccc;
        }

        .fix_right {
            position: relative;
            float: right;
            width: 230px;
            margin-left: -230px;
            /*background-color: blueviolet;*/

        }

        .auto_left {
            float: left;
            width: 100%;
            /*background-color: palevioletred;*/
        }

        .auto_left_inner {
            margin-right: 245px;
            /*background-color: blue;*/
        }

        .well {
            padding: 19px;
        }

    </style>

    <link rel="stylesheet" href="../Content/css/base/well.css">
    <link rel="stylesheet" href="../Content/css/border-color.css">


</head>

<body>

<!--<div class="loading-container">-->
<!--<div class="loader"></div>-->
<!--</div>-->

<div class="destwrap">
    <div class="auto_left">
        <div class="auto_left_inner">

            <div class="well with-header with-footer">
                <div class="header ">
                    <i class="fa fa-trophy" style="color: deeppink"></i>
                    Header
                </div>
                <div class="footer">Footer</div>
            </div>


            <div class="well with-header with-footer">
                <div class="header bordered-yellow">
                    <i class="fa fa-trophy" style="color: deeppink"></i>
                    Header
                </div>
                <div class="footer">Footer</div>
            </div>


            <div class="well with-header with-footer">
                <div class="header bordered-palegreen">
                    <i class="fa fa-trophy" style="color: deeppink"></i>
                    Header
                </div>
                <div class="footer">Footer</div>
            </div>

            <div class="well with-header with-footer">
                <div class="header bordered-palegreen">Header</div>
                <div>

                </div>
            </div>

            <div class="well with-header with-footer">
                <div class="footer">I'm Footer</div>
            </div>

            <div class="well with-header with-footer">

            </div>

            <div class="well bg-magenta bordered-left bordered-yellow">
                <h4 class="block">Colored Well</h4>

            </div>


            <div class="well attached top">
                <div class="">top</div>
                <div class="">top</div>
                <div class="">top</div>
            </div>
            <div class="well attached">
                <div class="">middle</div>
                <div class="">middle</div>
                <div class="">middle</div>
            </div>
            <div class="well attached bottom">
                <div class="">bottom</div>
                <div class="">bottom</div>
                <div class="">bottom</div>
            </div>


            <div class="well  with-header">
                <div class="header bordered-palegreen"> Header</div>
                <div class="">top</div>
                <div class="">top</div>
                <div class="">top</div>
            </div>

            <div class="well  with-header">
                <div class="header bordered-palegreen"> Header</div>
                <div class="">middle</div>
                <div class="">middle</div>
                <div class="">middle</div>
                <div class="">middle</div>
            </div>

            <div class="well with-header ">
                <div class="header bordered-palegreen"> Header</div>
                <div class="">bottom</div>
                <div class="">bottom</div>
                <div class="">bottom</div>
            </div>


        </div>
    </div>
    <div class="fix_right">


        <div class="well with-header with-footer" style="height: 200px">
            <div class="header bordered-palegreen">消息中心(固定宽度)</div>
            <div>

            </div>
        </div>

        <div class="well with-header with-footer" style="height: 200px">
            <div class="header bordered-palegreen">消息中心</div>
            <div>

            </div>
        </div>

        <div class="well with-header with-footer" style="height: 300px">
            <div class="header bordered-palegreen">消息中心</div>
            <div>

            </div>
        </div>

    </div>
</div>

<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(function () {
        $(window).bind("load resize", function () {

            var outerWidth = $(window).width();
            var outerHeight = $(window).height();

            $(".fix_right").css({
                height: outerHeight - 30 + 'px'
            });


        });
    });
</script>

</body>

</html>